<template>
  <div id="rankList">
    <!-- 数据更新时间 -->

    <!-- 榜单 -->
    <category_goods v-model="checkedDatasJoe" />
    <!-- 视频热评榜 -->
    <section class="filter" v-if="showKind == 1">
      <p>视频筛选</p>
      <el_select
        v-model="videoTime"
        title="视频时长"
        :options="['不限', '0-10s', '10s-20s', '20s-30s', '30s-60s', '60s+']"
      />
      <el_select
        v-model="favoriteCount"
        title="点赞数"
        :options="[
          '不限',
          '<1万',
          '1万-10万',
          '10万-50万',
          '50万-100万',
          '100万-500万',
          '500万-1000万',
          '>1000万'
        ]"
      />
    </section>
    <!-- <section class="filter mt_11" v-if="showKind == 1">
      <p>观众画像</p>
      <el_select
        v-model="age"
        title="主要年龄"
        :options="['不限', '6-17', '18-24', '25-30', '31-35', '36-40', '40+']"
      />
      <el_select
        v-model="gender"
        title="主要性别"
        :options="['不限', '男', '女']"
      />
      <el_select_city v-model="area" title="观众地域" />
    </section>-->
    <section class="timeBox mt_11">
      <!-- 时间 -->
      <radio_group01
        :radio_values="['6小时', '12小时', '24小时', '近3天', '近7天']"
        v-model="dateRange"
        class="timeOptions"
      />
      <!-- 搜索 -->
      <section class="search01">
        <div class="searchBox">
          <el-input v-model="keyword" placeholder=" 请输入关键词在排行榜中搜索" @keyup.enter.native="toSearch"></el-input>
          <div class="imgBox" @click="toSearch">
            <!-- <img src="@/assets/wang/talentCompare/search.png" /> -->
          </div>
        </div>
      </section>
      <div class="btn_group">
        <button @click="generatorImage">
          <span></span>分享
        </button>
        <button @click="export_data">
          <span></span>导出
        </button>
      </div>
    </section>
    <ul
      class="fixedThead"
      ref="fixedThead"
      :class="{ isShow: isFixed }"
      :style="showLeft == true ? 'left:222px' : 'left:98px'"
    >
      <li>视频内容</li>
      <!-- <th>品牌</th> -->
      <li>达人</li>
      <li tc v-if="rankKind == '视频飙升榜'">视频点赞总量</li>
      <li tc v-if="rankKind == '视频飙升榜'">商品浏览总量</li>
      <li tc v-if="rankKind == '视频飙升榜'">全网销量</li>
      <li
        tc
        v-if="
          rankKind == '视频热评榜' &&
            sortOrder == 'desc' &&
            sort != 'FavoriteCount'
        "
        style="  cursor: pointer;"
        @click="sort_fun(false, 4)"
      >
        点赞数
        <img
          src="@/assets/meng/down_up.png"
          v-if="sortOrder == 'desc' && sort == 'FavoriteCount'"
        />
        <img src="@/assets/meng/no_down_up.png" v-else />
      </li>
      <li
        tc
        v-if="
          rankKind == '视频热评榜' &&
            sortOrder == 'desc' &&
            sort == 'FavoriteCount'
        "
      >
        点赞数
        <img
          src="@/assets/meng/down_up.png"
          v-if="sortOrder == 'desc' && sort == 'FavoriteCount'"
        />
        <img src="@/assets/meng/no_down_up.png" v-else />
      </li>

      <li
        tc
        v-if="
          rankKind == '视频热评榜' &&
            sortOrder == 'desc' &&
            sort != 'CommentCount'
        "
        style="  cursor: pointer;"
        @click="sort_fun(false, 5)"
      >
        评论数
        <img
          src="@/assets/meng/down_up.png"
          v-if="sortOrder == 'desc' && sort == 'CommentCount'"
        />
        <img src="@/assets/meng/no_down_up.png" v-else />
      </li>
      <li
        tc
        v-if="
          rankKind == '视频热评榜' &&
            sortOrder == 'desc' &&
            sort == 'CommentCount'
        "
      >
        评论数
        <img
          src="@/assets/meng/down_up.png"
          v-if="sortOrder == 'desc' && sort == 'CommentCount'"
        />
        <img src="@/assets/meng/no_down_up.png" v-else />
      </li>

      <li
        tc
        v-if="
          rankKind == '视频热评榜' &&
            sortOrder == 'desc' &&
            sort != 'ShareCount'
        "
        style="  cursor: pointer;"
        @click="sort_fun(false, 6)"
      >
        转发数
        <img src="@/assets/meng/down_up.png" v-if="sortOrder == 'desc' && sort == 'ShareCount'" />
        <img src="@/assets/meng/no_down_up.png" v-else />
      </li>
      <li
        tc
        v-if="
          rankKind == '视频热评榜' &&
            sortOrder == 'desc' &&
            sort == 'ShareCount'
        "
      >
        转发数
        <img src="@/assets/meng/down_up.png" v-if="sortOrder == 'desc' && sort == 'ShareCount'" />
        <img src="@/assets/meng/no_down_up.png" v-else />
      </li>
      <li tc>操作</li>
    </ul>
    <section ref="capture">
      <table class="table">
        <thead>
          <tr>
            <th>视频内容</th>
            <!-- <th>品牌</th> -->
            <th>达人</th>
            <th v-if="rankKind == '视频飙升榜'">视频点赞总量</th>
            <th v-if="rankKind == '视频飙升榜'">商品浏览总量</th>
            <th v-if="rankKind == '视频飙升榜'">全网销量</th>
            <th
              v-if="
                rankKind == '视频热评榜' &&
                  sortOrder == 'desc' &&
                  sort != 'FavoriteCount'
              "
              style="  cursor: pointer;"
              @click="sort_fun(false, 4)"
            >
              点赞数
              <img
                src="@/assets/meng/down_up.png"
                v-if="sortOrder == 'desc' && sort == 'FavoriteCount'"
              />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <th
              v-if="
                rankKind == '视频热评榜' &&
                  sortOrder == 'desc' &&
                  sort == 'FavoriteCount'
              "
            >
              点赞数
              <img
                src="@/assets/meng/down_up.png"
                v-if="sortOrder == 'desc' && sort == 'FavoriteCount'"
              />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>

            <th
              v-if="
                rankKind == '视频热评榜' &&
                  sortOrder == 'desc' &&
                  sort != 'CommentCount'
              "
              style="  cursor: pointer;"
              @click="sort_fun(false, 5)"
            >
              评论数
              <img
                src="@/assets/meng/down_up.png"
                v-if="sortOrder == 'desc' && sort == 'CommentCount'"
              />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <th
              v-if="
                rankKind == '视频热评榜' &&
                  sortOrder == 'desc' &&
                  sort == 'CommentCount'
              "
            >
              评论数
              <img
                src="@/assets/meng/down_up.png"
                v-if="sortOrder == 'desc' && sort == 'CommentCount'"
              />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>

            <th
              v-if="
                rankKind == '视频热评榜' &&
                  sortOrder == 'desc' &&
                  sort != 'ShareCount'
              "
              style="  cursor: pointer;"
              @click="sort_fun(false, 6)"
            >
              转发数
              <img
                src="@/assets/meng/down_up.png"
                v-if="sortOrder == 'desc' && sort == 'ShareCount'"
              />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <th
              v-if="
                rankKind == '视频热评榜' &&
                  sortOrder == 'desc' &&
                  sort == 'ShareCount'
              "
            >
              转发数
              <img
                src="@/assets/meng/down_up.png"
                v-if="sortOrder == 'desc' && sort == 'ShareCount'"
              />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in dataList" :key="'d1' + index" :id="!index ? 'tr1' : ''">
            <td>
              <!-- 缩略图和标题跳到详情  关联商品和icon跳到热度分析 -->
              <div class="infoBox">
                <div class="leftBox">
                  <img :src="item.thumPic" @click="seeDetais(item.awemeId, '0')" class="thumImg" />
                  <img
                    src="@/assets/wang/video/play1.png"
                    class="playImg"
                    @click="playVideo(item.url)"
                  />
                </div>
                <div class="rightBox">
                  <p class="titleText" @click="seeDetais(item.awemeId, '0')">
                    {{ item.title }}
                    <!-- 缩略图和标题跳到详情  关联商品和icon跳到热度分析 缩略图和标题跳到详情  关联商品和icon跳到热度分析  -->
                  </p>

                  <p class="videoTimeText" v-if="rankKind == '视频热评榜'">
                    视频时长:
                    <span>{{ format_time(item.duration) }}</span>
                  </p>
                  <div>
                    <span>关联商品:</span>
                    <!-- 京东=0,淘宝=1,小店=2,天猫=3,苏宁=4,考拉=5 -->
                    <img
                      src="@/assets/meng/left03.png"
                      v-if="item.proFrom == '京东'"
                      @click="toGoodsDetails(item.proId, '0')"
                    />
                    <img
                      src="@/assets/meng/left07.png"
                      v-if="item.proFrom == '淘宝'"
                      @click="toGoodsDetails(item.proId, '0')"
                    />
                    <img
                      src="@/assets/meng/left01.png"
                      v-if="item.proFrom == '小店'"
                      @click="toGoodsDetails(item.proId, '0')"
                    />
                    <img
                      src="@/assets/meng/left08.png"
                      v-if="item.proFrom == '天猫'"
                      @click="toGoodsDetails(item.proId, '0')"
                    />
                    <img
                      src="@/assets/meng/left09.png"
                      v-if="item.proFrom == '苏宁'"
                      @click="toGoodsDetails(item.proId, '0')"
                    />
                    <img
                      src="@/assets/meng/left04.png"
                      v-if="item.proFrom == '考拉'"
                      @click="toGoodsDetails(item.proId, '0')"
                    />

                    <span @click="toGoodsDetails(item.proId, '0')">{{ item.proTitle }}</span>
                  </div>
                </div>
              </div>
            </td>
            <!-- <td>
              <span v-if="item.brand">{{ item.brand }}</span>
              <span v-else>--</span>
            </td>-->
            <td>
              <div class="telentName">
                <img :src="item.logo" alt @click="toAnalysis(item.authorId)" />
                <div>
                  <p @click="toAnalysis(item.authorId)">{{ item.nickName }}</p>

                  <p>{{ item.releaseTime }}</p>
                </div>
              </div>
            </td>
            <!-- 视频飙升榜 -->
            <td v-if="rankKind == '视频飙升榜'">{{ format_num(item.favoriteCount) }}</td>
            <td v-if="rankKind == '视频飙升榜'">{{ format_num(item.views) }}</td>
            <td v-if="rankKind == '视频飙升榜'">{{ format_num(item.volume) }}</td>
            <!-- 视频热评榜 -->
            <td v-if="rankKind == '视频热评榜'">
              <div class="numBox">
                <span>{{ format_num(item.favoriteCount) }}</span>
              </div>
            </td>
            <td v-if="rankKind == '视频热评榜'">
              <div class="numBox">
                <span>{{ format_num(item.commentCount) }}</span>
              </div>
            </td>
            <td v-if="rankKind == '视频热评榜'">
              <div class="numBox">
                <span>{{ format_num(item.shareCount) }}</span>
              </div>
            </td>
            <td>
              <div class="optionBox">
                <button @click="seeDetais(item.awemeId, '0')">查看详情</button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <div
        v-loading="loading01"
        v-if="loading01"
        class="loading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
      ></div>
      <!-- <p class="nothing" v-show="dataList.length < 20 && !loading01 && dataList.length != 0">我是有底线的～</p> -->
      <div class="upgradeBox" v-if="!permissions && !loading01">
        <RankUpgrade class="rankUpgrade" />
      </div>
      <!-- <div class="upgradeBox" v-if="permissions && !loading01 &&vipLevel==0">
        <RankUpgrade class="rankUpgrade" />
      </div> -->
      <div class="pageBox" v-if="!loading01 && count > 30">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="count"
          :page-size="30"
          :current-page="page"
          @current-change="getData"
          :hide-on-single-page="true"
        ></el-pagination>
      </div>
      <div class="empty addTop" v-show="!loading01 && dataList.length == 0 && permissions">
        <img src="@/assets/liu/zw.png" />
        <p>暂无数据</p>
      </div>
    </section>
    <!-- 详情弹窗 -->
    <pop v-if="dialog" v-model="dialog" :id="video_id" :index="active_name01" />
  </div>
</template>

<script>
import category_goods from '@/component/category_goods.vue';
import html2canvas from 'html2canvas';
import Radiogroup02 from '@/component/radio_group02.vue';
import pop from '@/pages/meng/video/pop';
import SourceIcon from '@/component/SourceIcon.vue';
import RankUpgrade from '@/component/rankUpgrade.vue';

export default {
  components: {
    Radiogroup02,
    pop,
    SourceIcon,
    category_goods,
    RankUpgrade
  },
  data() {
    return {
      checkedDatasJoe: {
        //商品类目数据初始数据，新筛选组件用
        parentId: 0,
        childIds: []
      },
      radioValues: [
        {
          title: '视频飙升榜',
          tipWords: [
            '视频点赞总量=统计该视频的总点赞量',
            '商品浏览总量=统计该商品的总浏览量',
            '全网销量：商品在全平台的累计总销量'
          ]
        },
        {
          title: '视频热评榜',
          tipWords: [
            '点赞量=查询时视频的点赞数',
            '评论量=查询时视频的评论数',
            '转发量=查询时视频的转发数'
          ]
        }
      ],
      rankKind: '视频热评榜',
      dateRange: '24小时',
      keyword: '',
      showKind: 1,
      goodsKind: '全部',
      dataList: [],
      page01: 1,
      busy01: false,
      loading01: true,
      videoTime: '不限',
      favoriteCount: '不限',
      age: '不限',
      gender: '不限',
      area: '不限,不限',
      sortOrder: 'desc', //   表格头部排序
      sort: 'CommentCount', //   表格头部排序
      count: 0,
      page: 1,
      dialog: false,
      video_id: '',
      active_name01: 1,
      cancel: null,
      cancel01: null,
      cancel02: null,
      needBuy: false,
      showLeft: true,
      isFixed: false,
      offsetTop: 0,
      permissions: 0,
      vipLevel: '',
    };
  },
  computed: {
    changeData() {
      const { goodsKind, videoTime, favoriteCount, age, gender, area, dateRange } = this;
      return {
        goodsKind,
        videoTime,
        favoriteCount,
        age,
        gender,
        area,
        dateRange
      };
    }
  },
  watch: {
    checkedDatasJoe() {
      //新筛选组件用
      this.dataList = [];
      this.page01 = 1;
      this.page = 1;
      this.getData();
    },
    // 排行榜类型
    rankKind: function (newVal, oldVal) {
      if (newVal == '视频热评榜') {
        this.showKind = 0;
      } else if (newVal == '视频飙升榜') {
        this.showKind = 1;
      }
      (this.goodsKind = '全部'), (this.dateRange = '24小时');
      this.sortOrder = 'desc';
      this.sort = 'CommentCount';
      this.dataList = [];
      this.page01 = 1;
      this.getData();
    },
    // 搜索
    keyword: function (newVal, oldVal) {
      if (newVal == '') {
        this.dataList = [];
        this.page01 = 1;
        this.page = 1;
        this.getData();
      }
    },
    changeData() {
      this.dataList = [];
      this.page01 = 1;
      this.page = 1;
      this.getData();
    },
    '$store.state.left_nav_flag'(old, newOld) {
      this.showLeft = newOld;
      if ((newOld = false)) {
        this.setTBBar();
      } else {
        this.setTBBar();
      }
    }
  },
  created() {
    this.vipLevel = localStorage.getItem('vipLevel'); //会员等级
    this.getData();
  },
  mounted() {
    window.addEventListener('scroll', this.initHeight);
    window.addEventListener('resize', () => {
      //给浏览器窗口绑定变化大小事件
      this.setTBBar();
    });
  },
  methods: {
    // 获取子节点函数（后期可集成到一个库里）
    getChilds(pNode) {
      if (!pNode) return false;
      let nodes = pNode.childNodes;
      let newList = [];
      for (let i = 0; i < nodes.length; i++) {
        let node = nodes[i];
        if (node.nodeType === 1) {
          //判断类型
          newList.push(node);
        }
      }
      return newList;
    },
    // 设置表格表头滑动置顶
    setTBBar() {
      this.$nextTick(() => {
        let tableEl = this.$refs.tableEl;
        let ulEl = this.$refs.fixedThead;
        let tr1 = document.querySelector('#tr1');
        // thTrEl.style.width = tableEl.offsetWidth+'px';
        if (tr1) {
          let tds = this.getChilds(tr1);
          let liEls = this.getChilds(ulEl);

          for (let i = 0; i < liEls.length; i++) {
            liEls[i].style.width = tds[i].offsetWidth + 'px';
          }
        }
      });
    },
    // 排序
    sort_fun(parm01, parm02) {
      if (parm01) {
        this.sortOrder = 'asc';
      } else {
        this.sortOrder = 'desc';
      }
      switch (parm02) {
        case 1:
          this.sort = 'FavoriteCount';
          break;
        case 2:
          this.sort = 'Views';
          break;
        case 3:
          this.sort = 'Volume';
          break;
        case 4:
          this.sort = 'FavoriteCount';
          break;
        case 5:
          this.sort = 'CommentCount';
          break;
        case 6:
          this.sort = 'ShareCount';
          break;
      }
      this.dataList = [];
      this.page01 = 1;
      this.page = 1;
      this.getData();
    },
    // 搜索
    toSearch() {
      this.dataList = [];
      this.page01 = 1;
      this.page = 1;
      this.getData();
    },
    // 跳到达人详情
    toAnalysis(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/0`
      });
      window.open(router.href, '_blank');
    },
    // 获取数据
    getData(cpage) {
      let that = this;
      this.dataList = [];
      if (cpage) {
        that.page = cpage;
        //console.log("page", this.page);
      }
      that.loading01 = true;
      that.needBuy = false;
      that.busy01 = true;
      // 时间
      let dateRangeR = that.dateRange.replace(/小时/, 'h');
      if (that.dateRange == '近3天') {
        dateRangeR = '3d';
      } else if (that.dateRange == '近7天') {
        dateRangeR = '7d';
      } else if (that.dateRange == '近15天') {
        dateRangeR = '15d';
      } else if (that.dateRange == '近30天') {
        dateRangeR = '30d';
      }
      // 地域
      if (that.area.split(',')[1] == '') {
        that.area = that.area + '不限';
      }

      // 请求接口
      if (that.rankKind == '视频飙升榜') {
        that.$axios
          .post(
            '/api/product/PostSoarRanks',
            {
              CategoryId: this.checkedDatasJoe.parentId,
              DateRange: dateRangeR,
              Keyword: this.trimStr(that.keyword),
              Index: that.page,
              Size: 20,
              SortOrder: that.sortOrder,
              SortValue: that.sort //FavoriteCount点赞量 Views浏览量 Volume销量
            },
            {
              cancelToken: new that.$axios.CancelToken(function executor(c) {
                if (that.cancel != null) {
                  that.cancel();
                }
                that.cancel = c;
              })
            }
          )
          .then(res => {
            if (res.data.code == 0) {
              that.loading01 = false;
              that.page01 += 1;
              res.data.data.ranks.length < 20 ? (that.busy01 = true) : (that.busy01 = false);
              that.dataList = that.dataList.concat(res.data.data.ranks);
              that.count = res.data.data.count;
              that.setTBBar();
            } else if (res.data.code == 1003) {
              that.busy01 = true;
              that.needBuy = true;
            }
          })
          .catch(err => {
            console.log(err);
          });
      } else if (that.rankKind == '视频热评榜') {
        // 时间 s==>000  变成毫秒传
        let videoTimeR = that.videoTime.replace(/s/g, '000');
        if (videoTimeR == '60000+') {
          videoTimeR = '>60000';
        }
        if (cpage) {
          that.page = cpage;
          that.backTop();
        }
        that.$axios
          .post(
            '/api/product/PostHotComsRanks',
            {
              CategoryId: this.checkedDatasJoe.parentId,
              categoryIds: this.checkedDatasJoe.childIds,
              FavoriteCount: that.favoriteCount,
              VideoTime: videoTimeR,
              Gender: that.gender,
              Age: that.age,
              Province: that.area.split(',')[0],
              City: that.area.split(',')[1],
              Keyword: that.keyword,
              DateRange: dateRangeR,
              Index: that.page,
              Size: 30,
              SortValue: that.sort, //排序列 FavoriteCount 点赞量 CommentCount评论量 ShareCount转发量
              SortOrder: that.sortOrder //asc正序 desc倒序
            },
            {
              cancelToken: new that.$axios.CancelToken(function executor(c) {
                if (that.cancel != null) {
                  that.cancel();
                }
                that.cancel = c;
              })
            }
          )
          .then(res => {
            if (res.data.code1 ==1013||res.data.code == 1003||res.data.code ==1013) {
              this.permissions = 0;
              this.dataList = [];
            } else {
              this.count = res.data.data.count;
              this.permissions = 1;
            }
            if (res.data.code == 0) {
              that.page01 += 1;
              res.data.data.ranks.length < 20 ? (that.busy01 = true) : (that.busy01 = false);
              that.dataList = that.dataList.concat(res.data.data.ranks);that.count = res.data.data.count;
              that.setTBBar();
            }
            that.loading01 = false;
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    loadMore() {
      this.getData();
    },
    // 播放
    playVideo(url) {
      window.open(url);
    },
    // 分享
    generatorImage() {
      var that = this;
      // 时间
      let date = this.dateRange;
      const loading01 = this.$loading({
        lock: true,
        text: '导出中...',
        spinner: 'el-icon-loading01',
        customClass: 'customClass'
      });
      var shareContent;
      shareContent = this.$refs.capture; //需要截图的包裹的（原生的）DOM 对象
      // console.log("shareContent", shareContent);
      var width = shareContent.offsetWidth; //获取dom 宽度
      var height = shareContent.offsetHeight; //获取dom 高度
      var canvas = document.createElement('canvas'); //创建一个canvas节点
      //   var scale = window.devicePixelRatio //定义任意放大倍数 支持小数 //   var scale = 2 //定义任意放大倍数 支持小数
      var scale = 1;
      canvas.width = width * scale * scale; //定义canvas 宽度 * 缩放
      canvas.height = height * scale * scale; //定义canvas高度 *缩放
      canvas.style.width = width + 'px';
      canvas.style.height = height + 'px';
      canvas.getContext('2d').scale(scale, scale); //获取context,设置scale
      var opts = {
        dpi: window.devicePixelRatio,
        scale: scale, // 添加的scale 参数
        useCORS: true,
        canvas: canvas, //自定义 canvas
        logging: true //日志开关
      };
      html2canvas(shareContent, opts).then(canvas => {
        let str;
        if (that.rankKind == '视频飙升榜') {
          str = `《视频飙升榜-${date}》.png`;
        } else if (that.rankKind == '视频热评榜') {
          str = `《视频热评榜-${date}》.png`;
        }
        canvas.toBlob(
          function (blob) {
            const eleLink = document.createElement('a');
            eleLink.download = str;
            eleLink.style.display = 'none';
            // 字符内容转变成blob地址
            eleLink.href = URL.createObjectURL(blob);
            // 触发点击
            document.body.appendChild(eleLink);
            eleLink.click();
            // 然后移除
            document.body.removeChild(eleLink);
          },
          'image/png',
          1
        );
        loading01.close();
      });
    },
    // 导出
    // 文字加replace 数字加\t
    export_data() {
      let that = this;
      // 时间
      let date = this.dateRange;
      let str = '';
      if (that.rankKind == '视频热评榜') {
        str = `视频标题,视频时长,关联商品名称,达人名称,发布时间,点赞数,评论数,转发数\n`;
        for (let i = 0; i < that.dataList.length; i++) {
          str += `\"${that.dataList[i].title}\",${that.format_time(that.dataList[i].duration)},\"${
            that.dataList[i].proTitle
          }\",\"${that.dataList[i].nickName}\",${that.dataList[i].releaseTime},${that.format_num(
            that.dataList[i].favoriteCount
          )},${that.format_num(that.dataList[i].commentCount)},${that.format_num(
            that.dataList[i].shareCount
          )}\n`;
        }
      }

      var blob = new Blob([str], { type: 'text/plain;charset=utf-8' }); //解决中文乱码问题
      blob = new Blob([String.fromCharCode(0xfeff), blob], { type: blob.type });
      let object_url = window.URL.createObjectURL(blob);
      var link = document.createElement('a');
      link.href = object_url;
      let str_name = '';
      if (that.rankKind == '视频飙升榜') {
        str_name = `《视频飙升榜-${date}》.csv`;
      } else if (that.rankKind == '视频热评榜') {
        str_name = `《视频热评榜-${date}》.csv`;
      }
      link.download = str_name;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    // 跳商品详情
    toGoodsDetails(id, tabNo) {
      let router = this.$router.resolve({
        path: `/talent_main/shop_main/${id}/${tabNo}`
      });
      window.open(router.href, '_blank');
    },
    // 视频详情
    seeDetais(id, index) {
      this.dialog = false;
      this.active_name01 = index;
      this.video_id = id;
      let router = this.$router.resolve({
        path: '/talent_main/videoDetails',
        query: { id }
      });
      window.open(router.href, '_blank');
    },
    // 收藏视频
    addStar(id, item) {
      let that = this;
      that.$axios
        .post(
          '/api/collection/InsertCollection',
          {
            CollectId: id,
            Module: 2 //模块 1达人 2视频 3音乐 4话题 5商品
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel01 != null) {
                that.cancel01();
              }
              that.cancel01 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            item.isCollect = 1;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 取消收藏视频
    cancelStar(id, item) {
      let that = this;
      that.$axios
        .post(
          '/api/collection/CancelCollection',
          {
            CollectId: id,
            Module: 2 //模块 1达人 2视频 3音乐 4话题 5商品
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel02 != null) {
                that.cancel02();
              }
              that.cancel02 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            item.isCollect = 0;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    toBuy() {
      let router = this.$router.resolve({
        path: `/talent_main/buy`
      });
      window.open(router.href, '_blank');
    },
    // 回到顶部方法，加计时器是为了过渡顺滑
    backTop() {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
    initHeight() {
      var scrollTop =
        window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      this.isFixed = scrollTop > 310 ? true : false;
    }
  }
};
</script>
<style lang="less" scoped>
#rankList {
  min-height: 100vh;
  padding-bottom: 1px;
  /* 搜索框 */
  .imgBox {
    background: url('../../../../assets/wang/talentCompare/search-nohover.png') no-repeat 10px 7px,
      #fff;
    background-size: 15px 15px;
  }
  .imgBox:hover {
    background: url('../../../../assets/wang/talentCompare/search.png') no-repeat 10px 7px, #fff;
    background-size: 15px 15px;
  }
  // 无数据加距离上部距离
  .addTop {
    padding-top: 130px;
  }
  .addPadding {
    height: 1px;
    opacity: 0;
    .title {
      margin-right: 46px !important;
    }
  }
  .search01 {
    display: inline-block;
    // margin-left: 28px;
    margin-bottom: 19px;
    .searchBox {
      margin-top: 0 !important;
    }
  }
  .timeOptions {
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 19px;
  }
  .btn_group {
    text-align: right;
    float: right;
    margin-bottom: 14px;
    button {
      width: 70px;
      height: 32px;
      border-radius: 4px;
      border: solid 1px #e5e5e5;
      font-size: 14px;
      // line-height: 30px;
      box-sizing: border-box;
      color: #555;
      text-align: center;
    }
    button:nth-of-type(2) {
      color: #67ac5b;
      border: 1px solid #67ac5b;
    }

    > button:nth-child(1) {
      margin-right: 10px;
      span {
        display: inline-block;
        width: 14px;
        height: 14px;
        background: url('../../../../assets/zhao/fenx.png') no-repeat;
        background-size: 100% 100%;
        margin-right: 4px;
        position: relative;
        top: 2px;
      }
    }
    > button:nth-child(2) {
      span {
        display: inline-block;
        width: 14px;
        height: 14px;
        background: url('../../../../assets/zhao/daoc.png') no-repeat;
        background-size: 100% 100%;
        margin-right: 4px;
        position: relative;
        top: 2px;
      }
    }
    button:nth-of-type(1):hover {
      color: #777;
      span {
        background: url('../../../../assets/zhao/fenx_h.png') no-repeat;
        background-size: 100% 100%;
      }
    }
    button:nth-of-type(2):hover {
      color: #80be76;
      border-color: #80be76;
      span {
        background: url('../../../../assets/zhao/daoc_h.png') no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  table {
    text-align: center;
    // margin-top: 19px;
    thead {
      img {
        width: 5px;
        height: 10px;
        vertical-align: 0;
        margin-right: 2px;
      }
      tr {
        th:nth-child(1) {
          text-align: left;
          padding-left: 72px;
          width: 27%;
        }
        th:nth-child(2) {
          text-align: left;
          padding-left: 10px;
        }
        th:nth-child(2),
        th:nth-child(3),
        th:nth-child(4),
        th:nth-child(5),
        th:nth-child(6) {
          width: 12%;
        }
        th:nth-child(7) {
          width: 13%;
        }
      }
    }
    tbody {
      tr {
        height: 78px;
        td:nth-child(4),
        td:nth-child(5),
        td:nth-child(6) {
          font-family: DINAlternate-Bold;
          font-size: 16px;
          color: #222222;
        }
      }
    }
    .infoBox {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .leftBox {
        width: 50px;
        height: 50px;
        border-radius: 6px;
        position: relative;
        cursor: pointer;
        margin-left: 61px;
        overflow: hidden;
        .thumImg {
          width: 100%;
          height: 100%;
          border-radius: 6px;
          border: 1px solid #e5e5e5;
          object-fit: cover;
        }
        .playImg {
          display: none;
          width: 20px;
          height: 20px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
      .leftBox:hover {
        .playImg {
          display: block;
        }
      }
      .rightBox {
        // width: 60%;
        flex: 1;
        margin-left: 11px;
        text-align: left;
        .titleText {
          width: 325px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 14px;
          color: #222;
          font-weight: 600;
          cursor: pointer;
        }
        .titleText:hover {
          color: #ff924b;
        }
        div {
          margin-top: 5px;
          line-height: 18px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          span:nth-of-type(1) {
            font-size: 14px;
            color: #888888;
            padding-right: 8px;
            display: inline-block;
            width: 62px;
            white-space: nowrap;
          }
          img {
            width: 18px;
            height: 18px;
            cursor: pointer;
            margin-right: 8px;
            // vertical-align: middle;
          }
          span:nth-of-type(2) {
            display: block;
            font-size: 14px;

            color: #888;
            cursor: pointer;
            width: 238px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          span:nth-of-type(2):hover {
            color: #ff924b;
          }
        }
        .videoTimeText {
          text-align: left;
          font-size: 14px;
          color: #888;
          span {
            color: #888;
            font-size: 14px;
            padding-left: 6px;
          }
        }
      }
    }
    // 达人
    .telentName {
      display: flex;
      text-align: left;
      p:nth-of-type(1) {
        font-size: 14px;
        font-weight: 600;
        color: #222;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
      p:nth-of-type(1):hover {
        color: #ff924b;
      }
      p:nth-of-type(2) {
        font-size: 14px;
        color: #888888;
      }
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 11px;
        cursor: pointer;
        flex-shrink: 0;
        border: 1px solid #e5e5e5;
      }
      div {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    }
    // 点赞
    .numBox {
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 15px;
        height: 14px;
      }
      span {
        font-family: DINAlternate-Bold;
        font-size: 16px;
        color: #222222;
        padding-left: 7px;
      }
    }
    // 操作
    .optionBox {
      border-radius: 0px 4px 4px 0px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      button {
        width: 88px;
        height: 32px;
        background-color: transparent;
        border-radius: 4px;
        border: 1px solid #fd7f2c;
        font-size: 14px;
        color: #fd7f2c;
      }
      button:hover {
        border-color: #ff924b;
        color: #ff924b;
      }
    }
  }
  .filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    > button {
      width: 110px;
      height: 32px;
      background-color: #fd7f2c;
      border-radius: 4px;
      text-align: center;
      color: #fff;
      font-size: 14px;
      margin-left: 40px;
      line-height: 30px;
    }
    > p:first-child {
      font-size: 14px;
      color: #888888;
      margin-right: 20px;
      line-height: 32px;
      white-space: nowrap;
      color: #555;
    }
    #el_select {
      margin-right: 30px;
    }
  }
}
.fixedThead {
  display: none;
  position: fixed;
  top: 60px;
  left: 200px;

  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  background-color: #f5f9ff;
  height: 48px;
  line-height: 48px;
  overflow: hidden;
  z-index: 99;
  font-size: 0;
  li {
    box-sizing: border-box;
    display: inline-block;
    font-size: 14px;
  }
  li:nth-child(1) {
    padding-left: 61px;
  }
  li:nth-child(2) {
    padding-left: 10px;
  }
  &.isShow {
    display: block;
  }
  img {
    width: 5px;
    height: 10px;
  }
  img:nth-child(1) {
    margin-right: 2px;
  }
}
[tc] {
  text-align: center;
}
[tl] {
  text-align: left;
}
[tr] {
  text-align: right;
}
// 升级会员
.upgradeBox {
  min-height: 60vh;
  position: relative;
  .rankUpgrade {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
